<!--
 * @Description: 
 * @Author: 张文韬
 * @Date: 2022-05-20 10:17:13
 * @LastEditTime: 2022-05-27 13:52:52
 * @LastEditors: 张文韬
 * @Reference: 
-->
<template>
  <div class='e-btn-box'>
    <el-button
      v-for='(item, index) in btn'
      :key='index'
      :icon='item.icon ? `el-icon-${item.icon}` : ""'
      v-bind='item.props'
      @click='handleBtnClick(item.event)'
      >{{ item.title }}</el-button
    >
  </div>
</template>

<script>
import btnList from './btnList';
export default {
  name: 'e-operation',
  components: {},
  props: {
    btns: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {},
  computed: {
    btn() {
      const list = [];
      this.btns.map(item => {
        const type = this.getRawType(item);
        if (type === 'String') {
          if (btnList[item]) {
            list.push(btnList[item]);
          }
        }
        if (type === 'Object') {
          if (
            this.hasKey(item, 'title') &&
            this.hasKey(item, 'event')
          ) {
            list.push(item);
          }
        }
      });
      return list;
    }
  },
  methods: {
    handleBtnClick(name) {
      this.$emit(name);
    },
    getRawType(value = '') {
      return Object.prototype.toString.call(value).slice(8, -1);
    },
    hasKey(obj = {}, key = '') {
      if (key) return key in obj;
      else {
        const keysArr = Object.keys(obj);
        return keysArr.length;
      }
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang='scss' scoped>
.e-btn-box {
  text-align: right;
}
</style>
